﻿@page "/components/{name}"
@page "/components"
@page "/charts/{name}"
@page "/charts"

<section class="main-container main-container-component">
    <article>

        @if (_demoComponent != null)
        {
            var title = $"{_demoComponent.SubTitle} {_demoComponent.Title} - Ant Design Blazor".Trim();
            <Microsoft.AspNetCore.Components.Web.Extensions.Head.Title Value="@title" />
            var docDemos = _demoComponent.DemoList?.Where(x => x.Docs.HasValue && x.Docs.Value) ?? Enumerable.Empty<DemoItem>();
            var demos = _demoComponent.DemoList?.Where(x => !x.Debug && !x.Docs.HasValue).OrderBy(x => x.Order) ?? Enumerable.Empty<DemoItem>();

            if (demos.Any())
            {
                <div class="toc-affix">
                    <Affix OffsetTop="16">
                        <Anchor Key="@_demoComponent.Title">
                            @foreach (var demo in demos)
                            {
                                <AnchorLink Href="@($"/{CurrentLanguage}/components/{_demoComponent.Title}#components-{_demoComponent.Title.ToLower()}-demo-{demo.Name}")" Title="@demo.Title" />
                            }
                            @if (!string.IsNullOrEmpty(_demoComponent.ApiDoc))
                            {
                                <AnchorLink Href="@($"/{CurrentLanguage}/components/{_demoComponent.Title}#API")" Title="API" />
                            }
                        </Anchor>
                    </Affix>
                </div>
            }

            <section class="markdown">
                <h1>
                    @_demoComponent.Title
                    <span class="subtitle">@_demoComponent.SubTitle</span>
                    <span class="widget"></span>
                    <a class="edit-button" rel="noopener noreferrer" target="_blank">
                        <i nz-icon="" nztype="edit" class="anticon anticon-edit">
                            <svg viewBox="64 64 896 896" fill="currentColor" width="1em" height="1em" data-icon="edit" aria-hidden="true"><path d="M257.7 752c2 0 4-.2 6-.5L431.9 722c2-.4 3.9-1.3 5.3-2.8l423.9-423.9a9.96 9.96 0 000-14.1L694.9 114.9c-1.9-1.9-4.4-2.9-7.1-2.9s-5.2 1-7.1 2.9L256.8 538.8c-1.5 1.5-2.4 3.3-2.8 5.3l-29.5 168.2a33.5 33.5 0 009.4 29.8c6.6 6.4 14.9 9.9 23.8 9.9zm67.4-174.4L687.8 215l73.3 73.3-362.7 362.6-88.9 15.7 15.6-89zM880 836H144c-17.7 0-32 14.3-32 32v36c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-36c0-17.7-14.3-32-32-32z"></path></svg>
                        </i>
                    </a>
                </h1>
                <section class="markdown">
                    @((MarkupString) _demoComponent.Desc)
                </section>

                @foreach (var docDemo in docDemos)
                {
                    <RazorBox Demo="@docDemo" @key="@($"{_demoComponent.Title}-{docDemo.Title}")" />
                }

                @if (demos.Any())
                {
                    <h2 data-scrollama-index="1">
                        @LanguageService.Resources["app.component.examples"]
                        <span class="all-code-box-controls">
                            @if (_demoComponent.Cols != 1)
                            {
                                @if (_expanded)
                                {
                                    <Icon Type="compress" Class="code-box-expand-trigger" OnClick="() => _expanded = false " />
                                }
                                else
                                {
                                    <Icon Type="expand" Class="code-box-expand-trigger" OnClick="() => _expanded = true " />
                                }
                            }
                            <Icon Type="code" Class="code-box-expand-trigger" />
                            <Icon Type="bug" Class="code-box-expand-trigger" />
                        </span>
                    </h2>
                }
            </section>
            @if (demos.Any())
            {
                <Row Style="margin-left: -8px; margin-right: -8px;">
                    @if (_demoComponent.Cols == 1 || _expanded)
                    {
                        foreach (var demo in demos)
                        {
                            <AntDesign.Col Span="24" Class="code-boxes-col-1-1" Style="padding-left: 8px; padding-right: 8px;">
                                <CodeBox Demo="demo" @key="@($"{_demoComponent.Title}-{demo.Title}")" ComponentName="@_demoComponent.Title"></CodeBox>
                            </AntDesign.Col>
                        }
                    }
                    else
                    {
                        var leftList = demos.Where((_, i) => i % 2 == 0);
                        var rightList = demos.Where((_, i) => i % 2 != 0);

                        <AntDesign.Col Span="12" Class="code-boxes-col-2-1" Style="padding-left: 8px; padding-right: 8px;">
                            @foreach (var demo in leftList)
                            {
                                <CodeBox Demo="demo" @key="@($"{_demoComponent.Title}-{demo.Title}")" ComponentName="@_demoComponent.Title"></CodeBox>
                            }
                        </AntDesign.Col>
                        <AntDesign.Col Span="12" Class="code-boxes-col-2-1" Style="padding-left: 8px; padding-right: 8px;">
                            @foreach (var demo in rightList)
                            {
                                <CodeBox Demo="demo" @key="@($"{_demoComponent.Title}-{demo.Title}")" ComponentName="@_demoComponent.Title"></CodeBox>
                            }
                        </AntDesign.Col>
                    }
                </Row>
            }
            <section class="markdown api-container">

                @((MarkupString) _demoComponent.ApiDoc)
            </section>

        }
    </article>
    @*<ul class="contributors-list" style="display: flex; list-style: none; margin: 0px; padding: 0px; flex-flow: wrap;"></ul>*@
</section>